<!DOCTYPE html>
<html>
	<head>
		<title>CSS Test: flow-into on ordered list items from multiple lists, including nested lists</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#properties" />
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" />
		<meta name="flags" content="">
		<meta name="assert" content="The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow.">
		<link rel="match" href="reference/extract-list-items-003-ref.html">
		<style>
		#outer-ordered-1 ol, 
		#outer-ordered-2 ol {
			color: blue;
		}
		#outer-ordered-2 ol ol {
			color: green;
		}
		
		#outer-ordered-1 > li {
			flow-into: f1;
		}
		#r1 {
			flow-from: f1;
		}

		#outer-ordered-2  li {
			flow-into: f2;
		}
		#r2 {
			flow-from: f2;
		}
		
		.region {
			margin: 2em;
			background-color: lightgray;
			width: 20em;
		}
		</style>
	</head>
	<body>
		<p>This test passes if there are two gray rectangles:  each with a list with another lists nested in it. The numbers for the black list in the first rectangle, and the numbers for all the lists in the second rectangle should be rendered outside of the gray boxes</p>
		<p>The list in the first rectangle should be black, with two blue nested lists in it. The nested lists should appear after the first and the second items, they should be indented and numbered starting at 1.</p>
		<p>The list in the second rectangle should be black, with a blue nested list in it that has in turn a nested green list in it. The numbers in the list items text should coincide with the list item numbers.</p>
		<ol id="outer-ordered-1">
			<li>First ordered list, item 1
				<ol>
					<li>First inner ordered list, item 1</li>
					<li>First inner ordered list, item 2</li>
					<li>First inner ordered list, item 3</li>
				</ol>
			</li>
			<li>First ordered list, item 2
				<ol>
					<li>Second inner ordered list, item 1</li>
					<li>Second inner ordered list, item 2</li>
				</ol>
			</li>
			<li>First ordered list, item 3</li>
		</ol>
		<div class="region" id="r1"></div>

		<ol id="outer-ordered-2">
			<li>Second ordered list, item 1</li>
			<li>Second ordered list, item 2
				<ol>
					<li>Last inner ordered list, item 1</li>
					<li>Last inner ordered list, item 2
						<ol>
							<li>Innermost ordered list, item 1</li>
							<li>Innermost ordered list, item 2</li>
						</ol>
					</li>
					<li>Last inner ordered list, item 3</li>
					<li>Last inner ordered list, item 4</li>
				</ol>
			</li>
			<li>Second ordered list, item 3</li>
		</ol>
		<div class="region" id="r2"></div>
	</body>
</html>